<!--
    @title index.vue
    @description TODO 头像修改
    @author yuzhenhan
    @date 2021/02/23 11:56:08
-->
<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span>头像修改</span>
      </div>

      <div class="text item">
        <div>
          <el-upload
            class="avatar-uploader"
            :action="url"
            :headers="auth"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <i
              v-if="imgUrl == null"
              class="el-icon-plus avatar-uploader-icon"
            />
            <img
              v-else
              style="border-radius: 50%"
              :src="imgUrl"
              class="avatar"
            />
          </el-upload>
        </div>
        <div class="box">
          <div class="title">点击图片修改</div>
          <el-button
            style="margin-top: 20px"
            type="primary"
            class="el-button"
            @click="saveAvatar()"
            >保存</el-button
          >
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'

import { getUserAvatar, setUserAvatar } from '@/api/uc/user'

export default {
  name: 'Index',
  data() {
    return {
      modify: false,
      avatar: '',
      imgUrl: '',
      auth: {
        Authorization: getToken()
      },
      url: process.env.VUE_APP_BASE_API + '/api/uc/user/upload_head_portrait'
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    beforeAvatarUpload(file) {
      console.log(file.type, 'file.type')
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 15;

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 15MB!');
      }
      return isJPG && isLt2M;
    },
    saveAvatar() {
      if (this.modify) {
        setUserAvatar({ avatar: this.avatar }).then((res) => {
          this.$message.success('保存成功')
          this.modify = false
          this.$router.go(0)
        })
      } else {
        this.$message.info('未修改图片')
      }
    },
    handleAvatarSuccess(res, file) {
      this.avatar = res.data.avatar
      this.imgUrl = res.data.avatarUrl
      this.modify = true
    },
    getData() {
      getUserAvatar().then((res) => {
        this.imgUrl = res.data.avatarUrl
        this.avatar = res.data.avatar
      })
    }
  }
}
</script>

<style scoped>
.box {
  text-align: left;
}
.title{
  margin-left: 42px;
  margin-top: 10px;
}
.box-card {
  border: 0px solid #000;
}
.el-button {
  text-align: left;
    margin-left: 53px;
}
.avatar-uploader {
  text-align: left;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
